<template>
	<view class="search-box">
		<view class="search-input">
			<u-icon color="#000" name="search"></u-icon>
			<input 
			  v-model="defaultValue"
			  @input="$emit('input',defaultValue)"
			  :type="type"
			  class="input-class"
			  @confirm="confirm"
			  :placeholder="placeholder">

		</view>
		<view class="other-icon"  v-if="!$slots.default">
			<!-- <u-icon size="48" color="#000" name="scan" @click="$emit('scan')"></u-icon> -->
			<u-icon size="48" color="#000" name="plus" @click="$emit('plus')"></u-icon>
		</view>
		<view class="other-icon" v-if="$slots.default">
			<slot>
				
			</slot>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			value:{type:String,default:''},
			type:{type:String,default:'text'},
			placeholder:{type:String,default:''},
		},
		data(){
			return {
				defaultValue:this.value
			}			
		},
		methods:{
			confirm(){
				this.$emit('search',this.defaultValue)
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
